<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>自动锁定网页示例（模糊效果）</title>
    <style>
      /* 锁定层的样式 */
      #lock-screen {
        display: none; /* 初始状态隐藏 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 背景半透明黑色 */
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        color: #fff;
        text-align: center;
        font-size: 24px;
        padding-top: 20%;
      }

      #lock-screen button {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 18px;
      }

      /* 锁定时主内容的模糊效果和交互禁用 */
      body.locked #main-content {
        filter: blur(7px); /* 模糊程度，可根据需要调整 */
        -webkit-filter: blur(7px); /* 兼容旧版浏览器 */
        pointer-events: none; /* 禁用鼠标事件 */
      }
    </style>
  </head>
  <body>
    <!-- 主内容容器 -->
    <div id="main-content">
      <h1>欢迎来到我的网站</h1>
      <p>如果5分钟内无操作，页面将被锁定并模糊显示。</p>
      <!-- 其它页面内容 -->
    </div>

    <!-- 锁定层 -->
    <div id="lock-screen">
      <p>页面已锁定</p>
      <button id="unlock-btn">解锁</button>
    </div>

    <script>
      let timeoutID

      // 重置计时器
      function resetTimer() {
        clearTimeout(timeoutID)
        // 设置5分钟（300,000毫秒）的计时器
        timeoutID = setTimeout(lockScreen, 3000)
      }

      // 锁定屏幕
      function lockScreen() {
        document.body.classList.add('locked') // 添加 'locked' 类
        document.getElementById('lock-screen').style.display = 'block'
      }

      // 解锁屏幕
      function unlockScreen() {
        document.body.classList.remove('locked') // 移除 'locked' 类
        document.getElementById('lock-screen').style.display = 'none'
        resetTimer()
      }

      // 监听用户操作事件
      function setupEventListeners() {
        // 鼠标移动
        document.addEventListener('mousemove', resetTimer)
        // 鼠标点击
        document.addEventListener('click', resetTimer)
        // 键盘按键（可选）
        document.addEventListener('keydown', resetTimer)
        // 触摸屏幕（针对移动设备）
        document.addEventListener('touchstart', resetTimer)
      }

      // 初始调用
      setupEventListeners()
      resetTimer()

      // 绑定解锁按钮事件
      document.getElementById('unlock-btn').addEventListener('click', unlockScreen)
    </script>
  </body>
</html>
